<template>
  <div class="view">
    <top-bar></top-bar>
    <div class="wrapper">
      <div id="player"><player></player></div>
      <div id="info-bar"><info-bar></info-bar></div>
    </div>

  </div>
</template>

<script>
  import TopBar from '../components/content/detail/topbar/Topbar.vue'
  import Player from '../components/content/detail/player/Player.vue'
  import InfoBar from '../components/content/infobar/Infobar.vue'
  export default {
    name: "detail",
    components:{
      TopBar,
      Player,
      InfoBar
    }

  }
</script>

<style scoped>
.wrapper{
  width:80%;
  margin:0 auto;
  text-align: left;
  flex:auto;
  display: flex;
}

  #info-bar{
    flex:auto;
    margin-left: 10px;
  }
  #player{
    flex: auto;
  }
</style>